<template>
    <div class="mt-10">
        <el-form ref="ruleForm" label-position="left" :rules="rules" :model="form" label-width="90px" size="mini">
            <el-form-item :label="`${$t('login.avatar')}:`" prop="objFile">
                <div>
                    <input type="file" @change="handleFileChange" ref="fileInput" style="display: none;">
                    <div style="display: flex; align-content: center;">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <button style="width: 130px; margin-left: 10px" @click="triggerFileInput">{{ $t('login.uploadTips') }}</button>
                    </div>
                </div>
            </el-form-item>
            <el-form-item :label="`${$t('login.username')}:`" prop="username">
                <el-input v-model="form.username" :placeholder="$t('login.usernameTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.password')}:`" prop="password">
                <el-input show-password v-model="form.password" :placeholder="$t('login.passwordTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.passwordAgain')}:`" prop="againPassword">
                <el-input show-password v-model="form.againPassword" :placeholder="$t('login.passwordAgainTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.phone')}:`">
                <el-input v-model="form.phone" :placeholder="$t('login.phoneTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.sex')}:`">
                <el-input v-model="form.gender" :placeholder="$t('login.sexTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.email')}:`">
                <el-input v-model="form.email" :placeholder="$t('login.emailTips')"/>
            </el-form-item>
            <el-form-item :label="`${$t('login.licensePlate')}:`">
                <el-input v-model="form.park_space_id" :placeholder="$t('login.licensePlateTips')"/>
            </el-form-item>
        </el-form>
        <div class="d-flex align-items-center justify-content-center">
            <el-button :loading="loading" @click="register">{{  $t('login.register') }}</el-button>
        </div>
    </div>
</template>

<script>
    import {get,post} from "@/utils/request";
    import {mapActions} from "vuex";

    export default {
        name: "Register",
        data(){
            return {
                imageUrl: null,
                file: null,
                form: {
                    objFile: null,
                    username: '',
                    password: '',
                    againPassword: '',
                    phone: '',
                    gender: '',
                    email: '',
                    park_space_id: '',
                },
                rules:{
                    objFile: [{ required: true,  message: this.$t('login.avatarTips'), trigger: 'change' }],
                    username: [{ required: true, message: this.$t('login.usernameTips'), trigger: 'change' }],
                    password: [{ required: true, message: this.$t('login.passwordTips'), trigger: 'change' }],
                    againPassword: [{ required: true, message: this.$t('login.passwordAgainTips'), trigger: 'change' }],
                },
                loading: false,
            }
        },
        mounted(){},
        methods: {
            ...mapActions(['setSignIn']),
            handleFileChange(event) {
                const file = event.target.files[0];
                if (!file) return;

                this.form.objFile = file;
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.imageUrl = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            triggerFileInput() {
                this.$refs.fileInput.click(); // 触发 input 元素的点击事件
            },

            async register() {
                await this.$refs.ruleForm.validate();
                this.loading = true;
                if (this.form.password !== this.form.againPassword) {
                    this.$message.error(this.$t('login.passwordError'));
                    return;
                }
                let formData = new FormData();
                formData.append('objFile', this.form.objFile);
                formData.append('username', this.form.username);
                formData.append('password', this.form.password);
                formData.append('phone', this.form.phone);
                formData.append('gender', this.form.gender);
                formData.append('email', this.form.email);

                try {
                    const response = await post('/open/auth/register', formData);

                    if (response.data && response.data.code == 200) {
                        this.$message({
                            message: '注册成功!',
                            type: 'success'
                        });
                        await this.$router.push({name: 'signIn'})
                        await this.setSignIn(0)
                    } else {
                        this.$message({
                          message: response.data.msg,
                          type: 'success'
                        });
                        throw new Error('Registration failed');
                    }
                } catch (err) {
                    console.error(err);
                } finally {
                    this.loading = false;
                }
            }

        }
    }
</script>

<style scoped>
    .avatar{
        border-radius: 50%;
        width: 10rem;
        height: 10rem;
    }
    /deep/ .el-form-item {
        margin-bottom: 19px;
    }
    .inp {
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        /* height: 50px; */
        height: 5rem;
        border-bottom: 1px solid #ccc;
    }
    .inp p{
        /* min-width: 70px; */
        min-width: 7rem;
        white-space: nowrap;
        /* margin-right: 10px; */
        margin-right: 1rem;
    }

    .inp input {
        /* width: 260px;
        height: 30px; */
        width: 26rem;
        height: 3rem;
        outline: none;
        border: none;
        color: #ccc;
        font-size: 1.6rem;
    }

    .login-r button {
        /* width: 300px;
        height: 35px; */
        width: 30rem;
        height: 3.5rem;
        background-color: #4f93fe;
        color: #fff;
        /* border-radius: 50px; */
        border-radius: 5rem;
        border: none;
        /* margin-top: 20px; */
        margin-top: 2rem;
        cursor: pointer;
        font-size: 1.6rem;

    }

    /* 媒体查询 Start */
    @media screen and (max-width: 767.9px) { /* 页面测试无法显示767，实际是767.2px */
        .inp {
            border-bottom: none;
            height: 8.5rem;
            margin-bottom: 1rem;
        }
        .inp>p {
            display: none;
        }
        .inp input {
            border: 1px #ccc solid;
            height: 6rem;
            border-radius: 2rem;
            padding: 0.5rem 0.8rem;
            box-sizing: border-box;
            width: 100%;
        }
        .login-r button {
            width: 35rem;
            height: 5.5rem;
            font-size: 1.8rem;
            margin-top: 4rem;
        }
        .login-r button {
            outline: none;
        }
    }

    /* @media screen and (min-width: 768px) and (max-width: 992px) {} */

    /* 媒体查询 End */
</style>
